import React from 'react';
import { Balloon } from '@teamix/ui';
import utils from 'utils';
import intl from '../../../../../../../../locale';

export default class UpdateInfo extends React.Component {
  render() {
    const { branchDataSource } = this.props;
    const updateInfoTrigger = (
      <span style={{ color: '#6e6e6e' }}>
        <span style={{ maxWidth: 'inherit' }}>
          {branchDataSource.commit.author
            ? branchDataSource.commit.author.name
            : branchDataSource.commit.author_name}
        </span>
        <span>
          {intl.get({
            id: 'code-assets.containers.branchListItem.updateInfo.UpdatedOn',
            defaultMessage: ' · 更新于',
          })}{' '}
        </span>
        <span>{utils.getBeautyTime(branchDataSource.commit.authored_date)}</span>
      </span>
    );

    const authorName = branchDataSource.commit.author
      ? branchDataSource.commit.author.name
      : branchDataSource.commit.author_name;
    const commitDate = utils.getBeautyTime(branchDataSource.commit.authored_date);
    const updateInfo = intl.get(
      {
        id: 'code-assets.containers.branchListItem.updateInfo.AuthornameUpdatedToCommitdate',
        defaultMessage: '更新于 {commitDate}',
      },
      { authorName, commitDate },
    );
    return (
      <span className="branch-item-update-info one-line-ellipsis">
        <Balloon.Tooltip align="t" trigger={updateInfoTrigger}>
          {updateInfo}
        </Balloon.Tooltip>
      </span>
    );
  }
}
